<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="navbar">
			<u-navbar :titleStyle="{color:'#333'}" bgColor="rgba(255,255,255,0)" title="我的" :autoBack="true">
				<view slot="left">
					<view></view>
				</view>
			</u-navbar>
		</view>
		<!-- 用户信息 -->
		<view class="user" :style="'padding-top: '+(customBarH + statusBarH + 15)+'px;'">
			<view class="info">
				<view class="avatar">
					<u--image :showLoading="true" :src="userInfo.avatar" width="120rpx" height="120rpx"
						shape="circle"></u--image>
				</view>
				<view class="content">
					<view class="nickname">{{ userInfo.nickname }}</view>
					<view class="idcard">ID:{{ userInfo.id }}</view>
				</view>
			</view>
		</view>
		<!-- 面板 -->
		<view class="panel">
			<view class="left" @click="onApplet">
				<view class="top">
					<view class="text">我的小程序</view>
				</view>
				<view class="desc">
					添加或一键授权你的小程序
				</view>
			</view>
			<view class="right" @click="on_get_auth_page">
				<view class="btn">
					<u-button shape="circle" color="linear-gradient(82deg, #FED9C3 0%, #FEBF97 100%)"
						text="一键授权"></u-button>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="order">
			<view class="header">
				<view class="text">我的备案</view>
			</view>
			<view class="lists">
				<u-grid :border="false" col="4">
					<u-grid-item @click="onOrder(0)">
						<u-icon
							name="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01SCQcSa1o5k5vw9s81_!!2064565174.png"
							:size="40"></u-icon>
						<text class="grid-text">全部备案</text>
					</u-grid-item>
					<u-grid-item @click="onOrder(1)">
						<u-icon
							name="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01luA4Vx1o5k66J61tY_!!2064565174.png"
							:size="40"></u-icon>
						<text class="grid-text">未支付</text>
					</u-grid-item>
					<u-grid-item @click="onOrder(2)">
						<u-icon
							name="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01YfCMvY1o5k64mZOSh_!!2064565174.png"
							:size="40"></u-icon>
						<text class="grid-text">进行中</text>
					</u-grid-item>
					<u-grid-item @click="onOrder(3)">
						<u-icon
							name="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01fWtjAM1o5k676RTut_!!2064565174.png"
							:size="40"></u-icon>
						<text class="grid-text">已备案</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 操作列表 -->
		<view class="tools">
			<view class="item" @click="onApplet">
				<view class="left">
					<view class="icon">
						<u-icon
							name="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01Uf33v61o5k63jJjvh_!!2064565174.png"
							:size="18"></u-icon>
					</view>
					<view class="text">我的小程序</view>
				</view>
				<view class="right">
					<view class="icon">
						<u--image width="16rpx" height="16rpx" :showLoading="true"
							src="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01LDuZRL1o5k607i8Vd_!!2064565174.png"></u--image>
					</view>
				</view>
			</view>
			<view class="item" @click="onCharge">
				<view class="left">
					<view class="icon">
						<u-icon
							name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01WnmdR21o5k5ztj5XB_!!2064565174.png"
							:size="18"></u-icon>
					</view>
					<view class="text">备案负责人</view>
				</view>
				<view class="right">
					<view class="icon">
						<u--image width="16rpx" height="16rpx" :showLoading="true"
							src="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01LDuZRL1o5k607i8Vd_!!2064565174.png"></u--image>
					</view>
				</view>
			</view>
			<view class="item" @click="onSubject">
				<view class="left">
					<view class="icon">
						<u-icon
							name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01U0whq01o5k63jMQGK_!!2064565174.png"
							:size="18"></u-icon>
					</view>
					<view class="text">备案主体</view>
				</view>
				<view class="right">
					<view class="icon">
						<u--image width="16rpx" height="16rpx" :showLoading="true"
							src="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01LDuZRL1o5k607i8Vd_!!2064565174.png"></u--image>
					</view>
				</view>
			</view>
			
			<view class="item" @click="onOrderAll">
				<view class="left">
					<view class="icon">
						<u-icon
							name="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01FuFRgF1o5k5xpfR9m_!!2064565174.png"
							:size="18"></u-icon>
					</view>
					<view class="text">我的备案</view>
				</view>
				<view class="right">
					<view class="icon">
						<u--image width="16rpx" height="16rpx" :showLoading="true"
							src="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01LDuZRL1o5k607i8Vd_!!2064565174.png"></u--image>
					</view>
				</view>
			</view>
			
			<view class="item" @click="onFiling">
				<view class="left">
					<view class="icon">
						<u-icon
							name="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01Uf33v61o5k63jJjvh_!!2064565174.png"
							:size="18"></u-icon>
					</view>
					<view class="text">备案流程</view>
				</view>
				<view class="right">
					<view class="icon">
						<u--image width="16rpx" height="16rpx" :showLoading="true"
							src="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01LDuZRL1o5k607i8Vd_!!2064565174.png"></u--image>
					</view>
				</view>
			</view>
		
			<button class="btn-normal" @click="openCustomer">
				<view class="item">
					<view class="left">
						<view class="icon">
							<u-icon
								name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01g1Qooe1o5k5zrQYpD_!!2064565174.png"
								:size="18"></u-icon>
						</view>
						<view class="text">联系客服</view>
					</view>
					<view class="right">
						<view class="icon">
							<u--image width="16rpx" height="16rpx" :showLoading="true"
								src="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01LDuZRL1o5k607i8Vd_!!2064565174.png"></u--image>
						</view>
					</view>
				</view>
			</button>
			
			
			
		</view>
		<view class="modal">
			<u-modal :zoom="false" @confirm="saveImage" @cancel="is_qrcode = false" :show="is_qrcode" showCancelButton
				title="微信扫码授权" confirmText="保存二维码" cancelText="取消操作">
				<view class="slot-content">
					<view class="canvas">
						<!-- 二维码插件 width height设置宽高 -->
						<canvas v-if="is_qrcode" canvas-id="qrcode"
							:style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
					</view>
				</view>
			</u-modal>
		</view>
		<!-- 版权 -->
		<view class="copyright">
			<view class="text">© 2023 Copyright {{ store.web_name }}</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="ad" v-if="spool['banner'].status && spool['banner'].status == 1">
			<ad :unit-id="spool['banner'].ad_id"  ad-theme="white"></ad>
		</view>
		<!-- #endif -->
		<!-- 隐私协议 -->
		<xh-privacy title="隐私保护指引" theme="direction" background="rgba(0, 0, 0, .5)" color="#2979ff"></xh-privacy>
	</view>
</template>

<script>
	import {
		insert,
		rewarded
	} from '@/utils/ad.js';
	import {
		pre_auth_page
	} from "@/api/applet.js";
	import {
		config
	} from "@/api/system.js";
	import {
		detail
	} from "@/api/user.js";
	import Vue from 'vue';
	import uQRCode from '@/uni_modules/cc-defineQRCode/components/cc-defineQRCode/common/uqrcode.js'
	export default {
		data() {
			return {
				user_id: '',
				store: {},
				userInfo: {},
				qrcodeText: 'eoruw20230528',
				// 二维码尺寸
				qrcodeSize: 280,
				// 最终生成的二维码图片
				qrcodeSrc: '',
				is_qrcode: false,
				// 状态栏高度
				statusBarH: 0,
				// 导航条高度
				customBarH: 0,
				share: {},
				spool: {},
				kefu:{}
			};
		},
		onLoad() {
			let _this = this
			_this.user_id = uni.getStorageSync('user_id')
			_this.statusBarH = getApp().globalData.statusBar
			_this.customBarH = getApp().globalData.customBar
			console.log(_this.statusBarH, _this.customBarH)
			this.getConfig()
			_this.getShare()
			_this.getSpool()
			_this.getCustomer()
		},
		onShareTimeline() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.id) {
				referee_id = _this.userInfo.id
			}
			return {
				imageUrl: _this.share.share_image,
				title: _this.share.share_title,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		onShareAppMessage() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.id) {
				referee_id = _this.userInfo.id
			}
			return {
				imageUrl: _this.share.share_image,
				title: _this.share.share_title,
				desc: _this.share.share_desc,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		onShow() {
			let _this = this
			_this.getUser()
		},
		methods: {
			onFiling(){
				uni.navigateTo({
					url:'/pages/tag/tag/index'
				})
			},
			openCustomer(){
				if(this.kefu.customer_status==0||!this.kefu.customer_status){
					uni.$u.toast('系统未配置客服')
					return;
				}
				
				wx.openCustomerServiceChat({
						extInfo: {
							    url:  this.kefu.customer_url
							},
							corpId: this.kefu.customer_corpId, //必须和你小程序上的一致
							success(res) {
								console.log(res, 1)
							},
							fail(res) {
								console.log(res, 2)
							},
					})
			},
			getSpool() {
				let _this = this
				config({
					key: 'liuliangzhu'
				}).then(res => {
					_this.spool = res.data.liuliangzhu
					if (_this.spool['incentive'].status == 1) {
						rewarded.load(_this.spool['incentive'].ad_id)
						rewarded.show()
					}
				}).catch(err => {

				})
			},
			getShare() {
				let _this = this
				config({
					key: 'share'
				}).then(res => {
					_this.share = res.data.share
				}).catch(err => {

				})
			},
			getUser() {
				let _this = this
				detail({}).then(res => {
					if (!res.data) {
						uni.redirectTo({
							url: '/pages/main/index/index'
						})
						return false;
					}
					_this.userInfo = res.data
				}).catch(err => {

				})
			},
			getConfig() {
				let _this = this
				config({
					key: 'store'
				}).then(res => {
					_this.store = res.data.store
				}).catch(err => {

				})
			},
			getCustomer(){
				let _this = this
				config({
					key: 'kefu'
				}).then(res => {
					_this.kefu = res.data.kefu
				}).catch(err => {
				
				})
			},
			onCharge() {
				uni.navigateTo({
					url: '/pages/charge/index/index'
				})
			},
			saveImage() {
				let _this = this
				_this.is_qrcode = false
				uni.saveImageToPhotosAlbum({
					filePath: _this.qrcodeSrc,
					success: () => {
						_this.$refs.uToast.show({
							type: 'success',
							message: "保存成功",
							complete() {

							}
						})
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			on_get_auth_page() {
				let _this = this
				uni.showLoading({
					title: '加载中...'
				})
				pre_auth_page({
					type: 'h5'
				}).then(res => {
					console.log(res.data.url, '10')
					_this.is_qrcode = true
					uQRCode.make({
						canvasId: 'qrcode',
						text: res.data.url,
						size: this.qrcodeSize,
						success: res => {
							this.qrcodeSrc = res
							console.log('qrcodeSrc = ' + this.qrcodeSrc);
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			onApplet() {
				uni.navigateTo({
					url: '/pages/applet/index/index'
				})
			},
			onOrder(status) {
				uni.navigateTo({
					url: '/pages/main/order/index?status=' + status
				})
			},
			onOrderAll() {
				uni.navigateTo({
					url: '/pages/main/order/index'
				})
			},
			onSubject() {
				uni.navigateTo({
					url: '/pages/subject/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.copyright {
		text-align: center;
		font-size: 24rpx;
		color: #ddd;
		padding: 30rpx 0rpx;
	}

	.tools {
		width: 93.5%;
		margin: 0 auto;
		background-color: #fff;
		margin-top: 15rpx;
		border-radius: 15rpx;

		.item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 30rpx 0rpx 30rpx;

			.left {
				display: flex;
				flex-direction: row;
				width: 96%;

				.text {
					width: 100%;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					margin-left: 15rpx;
					border-bottom: 2rpx solid #F7F8F9;
					padding-bottom: 30rpx;
				}
			}
		}

		.item:last-of-type {
			padding-bottom: 30rpx;
		}
	}

	.btn-normal {
		.item {
			padding-top: 0rpx;
		}
	}

	.order {
		width: 90%;
		margin: 0 auto;
		background-color: #fff;
		padding: 15rpx;
		border-radius: 15rpx;
		margin-top: 15rpx;

		.header {
			.text {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
			}
		}

		.lists {
			margin: 15rpx 0rpx;

			.grid-text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
				margin-top: 10rpx;
			}
		}
	}

	.panel {
		position: relative;
		width: 85%;
		margin: 0 auto;
		background-image: url('https://img.alicdn.com/imgextra/i4/2064565174/O1CN01m34uIJ1o5k648ju4J_!!2064565174.png');
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-radius: 15rpx;

		.right {
			width: 30%;

			.btn {
				/deep/ .u-button {
					font-size: 28rpx !important;
					font-family: PingFangSC-Regular, PingFang SC !important;
					font-weight: 400 !important;
					color: #472400 !important;
					line-height: 40rpx !important;
				}
			}
		}

		.left {
			width: 70%;

			.top {
				display: flex;
				flex-direction: row;
				align-items: center;

				.icon {
					margin-right: 15rpx;
				}

				.text {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FEC6A3;
					line-height: 40rpx;
					background: angular-gradient(100deg, #FEE2D4 0%, #FFB483 100%);
				}
			}

			.desc {
				margin-top: 15rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #EDD5C2;
				line-height: 34rpx;
			}
		}
	}

	.user {
		position: relative;
		width: 100%;
		background-image: url('https://img.alicdn.com/imgextra/i2/2064565174/O1CN01TopfoO1o5k64mXuwe_!!2064565174.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-bottom: 60rpx;

		.info {
			width: 94%;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: center;

			.avatar {
				margin-right: 15rpx;
			}

			.content {
				.nickname {
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 44rpx;
				}

				.idcard {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>